<template>
  <div>
    <!-- 搜索活动信息的搜索栏 -->
    <el-input v-model="nameOrAccount" placeholder="请输入活动名称或活动举办人名"></el-input>
    <el-button size="small" type="primary" @click="getAllActivity()">搜索</el-button>
    <div>
      <el-table
          row-key="id"
          :data="activityMessage"
          border style="width: 100%"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}">

        <el-table-column prop="activityName" label="活动名称" width="150"/>
        <el-table-column prop="activityContent" label="活动内容" width="300"/>
        <el-table-column prop="activityTime" label="活动开始时间" width="180"/>
        <el-table-column prop="activityPerson" label="发起人员" width="120" />
        <el-table-column prop="studentNum" label="需要学生数量" width="120" />
        <el-table-column prop="enterStartTime" label="报名开始时间" width="120" />
        <el-table-column prop="enterEndTime" label="报名结束时间" width="120" />
        <el-table-column align="center" fixed="right" prop="operate" label="操作" width="250">
          <template v-slot="scope">
            <el-button
                size="small"
                type="primary" icon="Edit"
                @click="unSubmit(scope)"
            >取消报名
            </el-button>
            <el-button
                size="small"
                type="primary" icon="Edit"
                @click="deleteActivity(scope)"
                v-if="isTeacher"
            >查看报名详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="footer">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[15, 30 , 60 ,  100 , 200 , 500 , 1000 , 2000 , 5000]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <!--    新增弹窗-->
    <el-dialog title="活动操作" v-model="this.dialogVisible" width="30%">
      <el-form :model="this.activity" :rules="rules" ref="activity">
        <el-form-item label="活动名称" prop="activityName">
          <el-input v-model="this.activity.activityName"></el-input>
        </el-form-item>
        <el-form-item label="活动内容" prop="activityContent">
          <el-input v-model="this.activity.activityContent"></el-input>
        </el-form-item>
        <el-form-item label="活动开始时间" prop="activityTime">
          <el-input v-model="this.activity.activityTime"></el-input>
        </el-form-item>
        <el-form-item label="需要学生数" prop="studentNum">
          <el-input v-model="this.activity.studentNum"></el-input>
        </el-form-item>
        <el-form-item label="报名开始时间" prop="enterStartTime">
          <el-input v-model="this.activity.enterStartTime"></el-input>
        </el-form-item>
        <el-form-item label="报名结束时间" prop="enterEndTime">
          <el-input v-model="this.activity.enterEndTime"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('activity')">取 消</el-button>
        <el-button type="primary" @click="confirmChange('activity')">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import request from "@/util/request.js";
import {activity} from "@/util/permissionJudgment.js";
export default {
  data() {
    return {
      dialogVisible: false,// 新增弹窗显示
      activity: {
        activityName:"",
        activityContent:"",
        studentNum:"",
        enterStartTime:"",
        enterEndTime:"",
        activityTime:""
      },        // 活动信息
      activityMessage: [],
      nameOrAccount: "",
      pageNum: 1, //页码
      pageSize: 15,  //页长
      total: 0,  //总表长
      rules: {
        activityName: [
          {required: true, trigger: 'blur', message: "活动名称不能为空"}
        ],
        activityContent: [
          {required: true, trigger: 'blur', message: "活动内容不能为空"}
        ],
        studentNum: [
          {required: true, trigger: 'blur', message: "需要学生数量不能为空"}
        ],
        enterStartTime: [
          {required: true, trigger: 'blur', message: "报名开始时间不能为空"}
        ],
        enterEndTime: [
          {required: true, trigger: 'blur', message: "报名结束时间不能为空"}
        ],
        activityTime: [
          {required: true, trigger: 'blur', message: "活动开始时间不能为空"}
        ],
      },
      isTeacher:activity(JSON.parse(localStorage.getItem('user')).roleNo)
    };
  },
  //初始化加载
  created() {
    this.getAllActivity()

  },
  methods: {
    // 获取所有活动
    getAllActivity(){
      request.get("/info_activity/page?pageNum="+this.pageNum+"&pageSize="+this.pageSize+"&activityName="+this.nameOrAccount+"&accountNo="+this.nameOrAccount).then(res=>{
        if (res.data.code === '200') {
          for (let key in res.data.data) {
            if (key === "records") {
              this.activityMessage = res.data.data[key];
            } else if (key === "total") {
              this.total = res.data.data[key];
            }
          }
        }
      })
    },
    // 新增活动提交
    confirmChange(activity){
      this.activity.accountNo=JSON.parse(localStorage.getItem('user')).accountNo;
      this.$refs[activity].validate((valid) => {
        if (valid) {
          request.post("/info_activity/edit", this.activity).then(res => {
            this.dialogVisible = false
            this.activity = {}
            if (res.data.code === "200") { // 新增成功
              this.$message({
                type: 'success',
                message: '新增成功',
                center: true,
              })
            } else {
              this.$message({
                type: 'error',
                message: '新增失败',
                center: true,
              })
            }
          })
        }
      })
    },
    // 表单清空
    resetForm(activity) {
      this.dialogVisible = false;
      this.activity={}
      this.$refs[activity].resetFields();
    },

    //表尾分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAllNoticeType();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getAllNoticeType();
    },
  }
};

</script>


<style scoped>

</style>
